<template>
  <!-- mv -->
  <div class="mv">
    <scroll class="mv-scroll"
            ref="scroll">
      <!-- 最新mv -->
      <div class="new-mv">
        <div class="title">
          最新mv
          <div class="right"
               @click="allMv()">
            <span>更多</span>
            <img src="~assets/img/content/next.svg"
                 alt />
          </div>
        </div>
        <mv-item :mv-list='mvList'></mv-item>
      </div>
      <!-- 最火mv -->
      <div class="ranklist">
        <div class="title">
          MV排行榜
          <div class="right"
               @click="allMv()">
            <span>更多</span>
            <img src="~assets/img/content/next.svg"
                 alt />
          </div>
        </div>
        <mv-rank-list :top-mv='topMv'></mv-rank-list>
      </div>
    </scroll>
  </div>
</template>

<script>
import Scroll from 'components/common/scroll/Scroll.vue'
import MvItem from './childComps/MVItem'
import MvRankList from './childComps/MVRankList'
import { _getNewMV, MV, _getTopMv } from 'network/mv'
export default {
  name: 'MV',
  components: {
    Scroll,
    MvItem,
    MvRankList
  },
  data () {
    return {
      limit: 8,
      mvList: [],
      topMv: []
    }
  },
  created () {
    // 获取最新mv
    _getNewMV(this.limit).then(res => {
      for (const i of res.data.data) {
        const mv = new MV(i.id, i.cover, i.name, i.artistName, i.playCount)
        this.mvList.push(mv)
      }
    })
    // 获取最热门mv
    _getTopMv().then(res => {
      for (const i of res.data.data) {
        const mv = new MV(i.id, i.cover, i.name, i.artistName, i.playCount)
        this.topMv.push(mv)
      }
    })
  },
  methods: {
    allMv () {
      this.$router.push('/allmv')
    }
  }

}
</script>
<style scoped>
.mv {
  width: 100%;
  height: 100%;
}
.mv-scroll {
  height: 100%;
}
.title {
  font-size: 18px;
  color: #007e26;
  padding: 5px 0px;
}
.title .right {
  cursor: pointer;
  height: 20px;
  font-size: 13px;
  color: var(--color-text-an);
  float: right;
}
.right span {
  vertical-align: 6px;
}
.right img {
  height: 100%;
  /* background-color: #000; */
}
.ranklist {
  margin-top: 30px;
}
</style>
